<template>
    <div id="importStuResult">
        <div class="breadcrumb">
            <img src="../../../../static/img/appoinment_1.png" class="head_img">
            <span class="title" @click="totest()">体测预约</span>/ 导入结果
        </div>

        <div class="list">
            <div id="sec_1">
                <div>
                    <span>导入成功人数</span>
                    <br>
                    <span class="num">{{okTotalCount}}人</span>
                </div>
                <div>
                    <span>导入失败人数</span>
                    <br>
                    <span class="num">{{totalCount}}人</span>
                </div>
            </div>
            <div class="improgress">
                <el-progress :text-inside="true" :stroke-width="18" :percentage="percentage"></el-progress>
                <el-button class="reImport" type="primary" @click="cancel()">重新导入</el-button>
            </div>
            <div class="list-result">
                <div class="tableTitle">导入错误记录</div>
                <el-table :data="list" border align="center">
                    <el-table-column prop="no" label="行数" width="120">
                    </el-table-column>
                    <el-table-column prop="msg" label="错误信息">
                    </el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination v-show="this.totalCount > 0" layout="prev, pager, next, jumper" :page-size="10" :current-page="currentPage"
                        :total="totalCount" @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { mapState, mapActions } from "vuex";

    export default {
        data() {
            return {
                itemId: this.$util.getUrlParam("itemId") || "",
                physicalName: this.$util.getUrlParam('physicalName') || "",
                imTotalCount: 0,
                imCurrentCount: 0,
                list: [],
                currentPage: 1,
                totalCount: 0,
                myInterval: null,
                percentage: 0,
                isClear: false,
                okTotalCount: 0
            };
        },
        mounted() {
            this.myInterval = setInterval(() => {
                this.getErrorList();
            }, 900);
        },
        destroyed() {
            clearInterval(this.myInterval)
        },
        computed: mapState({ user: state => state.user }),
        methods: {
            //返回
            cancel() {
                history.back();
            },
            totest() {
                let params = {
                    physicalTestId: this.$util.getUrlParam("physicalTestId"),
                    physicalName: this.physicalName,
                    itemId: this.itemId
                }
                this.$util.refreshTo("/#/importFile", params);
            },
            //获取错误信息列表
            getErrorList() {
                let url = this.$util.domain + "/managerapi/v2/importstudent";
                if (this.isClear) {
                    this.list = [];
                }

                this.$http({
                    url,
                    method: "POST",
                    body: JSON.stringify({
                        pageSize: 10,
                        pageNum: this.currentPage,
                        importId: this.$util.getUrlParam("importId") * 1,
                        physicalId: this.$util.getUrlParam("physicalTestId") * 1
                    })
                }).then(response => {
                    if (response.data.error == 10000) {
                        let dataList = response.data.data.list;
                        this.imTotalCount = response.data.data.totalCount;
                        this.imCurrentCount = response.data.data.currentCount;
                        this.totalCount = response.data.data.errorTotalCount;
                        this.okTotalCount = response.data.data.okTotalCount;

                        if (this.list.length < 10 || this.isClear) {
                            this.list = [];
                            if (dataList && dataList.length > 0) {
                                this.list = [...dataList];
                            }
                        }

                        if (this.imTotalCount > 0 && this.imCurrentCount <= this.imTotalCount) {
                            this.percentage = parseInt(Number(this.imCurrentCount) / Number(this.imTotalCount) * 100)
                        } else {
                            this.percentage = 100;
                        }
                        if (this.imCurrentCount >= this.imTotalCount) {
                            if (this.isClear) {
                                clearInterval(this.myInterval)
                            }
                            this.isClear = true;
                        }
                    } else {
                        clearInterval(this.myInterval);
                        this.$util.errorMsg(response.data.message);
                    }
                }).catch((response) => {
                    clearInterval(this.myInterval)
                });
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.getErrorList();
            }
        }
    };
</script>

<style>
    #importStuResult {
        padding-top: 80px;
        height: calc(100% - 100px);
    }

    #importStuResult .title {
        color: #0398FF;
    }

    #importStuResult .cancel {
        position: absolute;
        right: 20px;
        background: #333744;
        border-radius: 0;
        color: #fff;
        width: 80px;
        line-height: 36px;
        height: 36px;
        text-align: center;
        display: inline-block;
        cursor: pointer;
        font-size: 14px;
    }

    #importStuResult #sec_1 {
        width: 70%;
        margin-left: 15%;
        height: 150px;
        text-align: center;
        color: #333333;
        border: solid 1px #b2b2b2;
        font-size: 24px;
    }

    #importStuResult #sec_1>div {
        float: left;
        text-align: center;
        width: 49.5%;
        height: 150px;
        padding-top: 30px;
        box-sizing: border-box;
    }

    #importStuResult #sec_1>div:first-child {
        width: 50%;
        border-right: solid 1px #b2b2b2;
    }

    #importStuResult #sec_1 .num {
        color: #00c28b;
        margin-top: 25px;
        display: inline-block;
    }

    #importStuResult .improgress {
        position: relative;
        padding: 10px 0px;
        width: 70%;
        margin-left: 15%;
    }

    #importStuResult .reImport {
        position: absolute;
        width: 80px;
        right: 0px;
        top: 40px;
    }

    #importStuResult .list-result {
        width: 70%;
        margin-left: 15%;
        padding-top: 40px;
    }

    #importStuResult .tableTitle {
        text-align: center;
        color: #333333;
        font-size: 18px;
        font-family: "Microsoft YaHei";
        margin-bottom: 10px;
    }
</style>